<script setup>
	import {ref} from 'vue';
	import {userInfoAPI} from '@/apis/login.js';
	import { useUserStore } from '@/stores/index.js';
	const userStore=useUserStore()
	// 获取用户信息
	const userInfo = ref({})
	function getUserInfo() {
		userInfoAPI().then((res) => {
			userInfo.value = res.data
		}).catch((err) => {
			console.log(err);
		})
	}
	getUserInfo()
	
	
	// 退出登录
	const logout=()=>{
		   uni.showModal({
		   	content: '确定退出登录吗？',
		   	success: function (res) {
		   		if (res.confirm) {
		   			console.log('用户点击确定');
					userStore.logout()
		   		} else if (res.cancel) {
		   			console.log('用户点击取消');
		   		}
		   	}
		   });
	}
</script>
<template>
	<scroll-page background-color="#e9eaeb">
		<view class="my-page">
			<!-- 用户资料（头像&昵称） -->
			<view class="user-profile">
				<image class="user-avatar" :src="userInfo.avatar"></image>
				<view class="user-info">
					<text class="nickname">{{userInfo.account}}</text>
					<text class="iconfont icon-edit">{{userInfo.mobile}}</text>
				</view>
			</view>
			<!-- 用户数据 -->
			<view class="user-data">
				<navigator hover-class="none" url=" ">
					<text class="data-number">{{userInfo.collectionNumber}}</text>
					<text class="data-label">收藏</text>
				</navigator>
				<navigator hover-class="none" url=" ">
					<text class="data-number">{{userInfo.likeNumber}}</text>
					<text class="data-label">关注</text>
				</navigator>
				<navigator hover-class="none" url=" ">
					<text class="data-number">{{userInfo.score}}</text>
					<text class="data-label">积分</text>
				</navigator>
				<navigator hover-class="none" url=" ">
					<text class="data-number">{{userInfo.couponNumber}}</text>
					<text class="data-label">优惠券</text>
				</navigator>
			</view>
			<!-- 问诊医生 -->
			<custom-section :custom-style="{ paddingBottom: '20rpx' }" title="问诊中">
				<swiper class="uni-swiper" indicator-active-color="#2CB5A5" indicator-color="#EAF8F6" indicator-dots>
					<swiper-item>
						<view class="doctor-brief">
							<image class="doctor-avatar" src="/static/images/y2.png" />
							<view class="doctor-info">
								<view class="meta">
									<text class="name">王医生</text>
									<text class="title">内分泌科 | 主任医师</text>
								</view>
								<view class="meta">
									<text class="tag">三甲</text>
									<text class="hospital">积水潭医院</text>
								</view>
							</view>
							<navigator class="doctor-contcat" hover-class="none" url=" ">
								进入咨询
							</navigator>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="doctor-brief">
							<image class="doctor-avatar" src="/static/images/y1.png" />
							<view class="doctor-info">
								<view class="meta">
									<text class="name">王医生</text>
									<text class="title">内分泌科 | 主任医师</text>
								</view>
								<view class="meta">
									<text class="tag">三甲</text>
									<text class="hospital">积水潭医院</text>
								</view>
							</view>
							<navigator class="doctor-contcat" hover-class="none" url=" ">
								进入咨询
							</navigator>
						</view>
					</swiper-item>
				</swiper>
			</custom-section>
			<!-- 药品订单 -->
			<custom-section show-arrow title="药品订单">
				<template #right>
					<navigator hover-class="none" url=" ">
						全部订单
					</navigator>
				</template>
				<view class="drug-order">
					<navigator hover-class="none" url=" ">
						<uni-badge :text="0" :offset="[3, 3]" absolute="rightTop">
							<image src="/static/images/p1.png" class="status-icon" />
						</uni-badge>
						<text class="status-label">待付款</text>
					</navigator>
					<navigator hover-class="none" url=" ">
						<uni-badge text="2" :offset="[3, 3]" absolute="rightTop">
							<image src="/static/images/p2.png" class="status-icon" />
						</uni-badge>
						<text class="status-label">已付款</text>
					</navigator>
					<navigator hover-class="none" url=" ">
						<uni-badge :text="0" :offset="[3, 3]" absolute="rightTop">
							<image src="/static/images/p3.png" class="status-icon" />
						</uni-badge>
						<text class="status-label">待收货</text>
					</navigator>
					<navigator hover-class="none" url=" ">
						<uni-badge :text="0" :offset="[3, 3]" absolute="rightTop">
							<image src="/static/images/p4.png" class="status-icon" />
						</uni-badge>
						<text class="status-label">已收货</text>
					</navigator>
				</view>
			</custom-section>
			<!-- 快捷工具 -->
			<custom-section title="快捷工具">
				<uni-list :border="false">
					<uni-list-item :border="false" title="我的问诊" show-arrow show-extra-icon
					to="/subpack_consult/orderlist/index"
					 :extra-icon="{ type:'chatboxes'}" />
					<uni-list-item :border="false" title="我的处方" show-arrow show-extra-icon :extra-icon="{
			  type:'wallet'
			}" />
					<uni-list-item :border="false" title="家庭档案" show-arrow show-extra-icon 
					to="/subpackages/subpack_my/homelist/index"
					:extra-icon="{
			  type:'map'
			}" />
					<uni-list-item :border="false" title="地址管理" show-arrow show-extra-icon :extra-icon="{
			  type:'location'
			}" />
					<uni-list-item :border="false" title="我的评价" show-arrow show-extra-icon :extra-icon="{
              type:'hand-up'
            }" />
					<uni-list-item :border="false" title="官方客服" show-arrow show-extra-icon :extra-icon="{
			  type:'headphones'
			}" />
					<uni-list-item :border="false" title="设置" show-arrow show-extra-icon :extra-icon="{
			  type:'gear'
			}" />
				</uni-list>
			</custom-section>
			<!-- 退出登录 -->
			<view class="logout-button" @click="logout">退出登录</view>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	@import './my.scss';
</style>